/*
 * 账号总览列表
 * @Author: ljb
 * @Date: 2019-03-15 10:32:31
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-15 16:14:48
 */
<template>
	<div class="v-admin-account-overview-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="accounts"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import { conversionTime } from 'src/utils/utils';

export default {
	name: 'AccountOverviewIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		accounts: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('device.account_information'),
					key: 'account',
					align: 'center',
					render: (h, { row }) => <div> { row.account || '-' } </div>,
				},
				{
					title: this.$t('home.try_on'),
					key: 'product_try_on_count',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div>{ row.product_try_on_count || '-' }</div>,
				},
				{
					title: this.$t('home.test_number'),
					key: 'skin_record_count',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div>{ row.skin_record_count || '-' }</div>,
				},
				{
					title: this.$t('device.store'),
					key: 'store',
					align: 'center',
					render: (h, { row }) => <div> { row.store || '-' } </div>,
				},
				{
					title: this.$t('device.customer'),
					key: 'customer',
					align: 'center',
					render: (h, { row }) => <div> { row.customer || '-' } </div>,
				},
				{
					title: this.$t('device.geographical_location'),
					key: 'location',
					align: 'center',
					render: (h, { row }) => <div> { row.location || '-' } </div>,
				},
				{
					title: `${this.$t('device.alive_seconds')}`,
					key: 'alive_seconds',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { conversionTime(row.alive_seconds) || '-' } </div>,
				},
				{
					title: this.$t('device.account_status'),
					key: 'enabled',
					align: 'center',
					render: (h, { row }) => <div> { row.enabled ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon> } </div>,
				},
				{
					title: this.$t('device.created_at'),
					key: 'created_at',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 135,
					render: (h, { row }) => (
						<div>
							{
								!row.enabled
									?
									<Button size="small" on-click={() => { this.$emit('enable', row); }} type="success">
										{this.$t('device.enable')}
									</Button>
									:
									<Button size="small" on-click={() => { this.$emit('disable', row); }} type="error">
										{this.$t('device.disable')}
									</Button>
							}
						</div>),
				},
			],
		};
	},
	methods: {
		/**
		 * 排序的回调
		 * @param  {Object} param {columns列表对应sortable属性所包含，key值，order排序字段}
		 * @return {undefined}
		 */
		sortable(param) {
			const search_param = {
				order_by: param.order === 'normal' ? '' : param.key,

				sort: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},
	},
};
</script>
